<template>
    <div class="name">
      <div class="input" v-if="isClick && isInput"><el-input v-model="tagValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"/></div>
      <div class="info" @click="handleInputValue"><span v-if="isPrice">￥</span><span v-if="!isClick">{{itemValue}}</span></div>
    </div>
</template>

<script>
  export default {
    name: 'SkuInput',
    data() {
      return {
        tagValue: '',
        isClick: false
      }
    },
    props: {
      indexArr: {
        type: Object
      },
      isPrice: {
        type: Boolean
      },
      isInput: {
        type: Boolean
      },
      itemValue: {
        type: String
      }
    },
    methods: {
      handleInputValue() {
        if (this.isInput) {
          this.isClick = true
          this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus()
          })
          this.tagValue = this.itemValue
        } else {
          return false
        }
      },
      handleInputConfirm() {
        this.isClick = false
        this.$emit('skuInput', { indexArr: this.indexArr, value: this.tagValue })
      }
    }
  }
</script>

<style lang="scss" scoped>
.name{
  position: relative;
  height: 36px;
}
.input{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  margin:0 10px;
}
</style>
